<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>个人信息</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-4.6.0-dist/css/bootstrap.min.css"/>
    <style>
        body {
            font-family: '华文中宋';
            font-size: 15px;
            margin: 0;
            padding: 0;
            background-image: url('../img/img.png');
            background-size: cover;
        }

        .background {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 90vh;
        }

        div.transbox {
            width: 1050px;
            height: 470px;
            margin: 100px 90px;
            background-color: #ffffff;
            border: 1px solid #FFFFFF;
            border-radius: 10px;
            padding: 10px;
            opacity: 0.8;
        }

        h1 {
            text-align: center;
        }


        /*cc:change color*/
        a.cc:visited {
            color: #0000ff;
        }

        a.cc:hover {
            color: #ffcc00;
        }

        .error-message {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
<%@include file="../resources/nav.jsp" %>
<%

%>

<div class="background">
    <div class="transbox">
        <div style="text-align: center;line-height: 50px; font-size: 24px;font-weight: bolder">个人中心</div>
        <div id="imgDiv" style="text-align: center;line-height: 50px; margin-bottom: 20px">
            <c:choose>
                <c:when test="${requestScope.person.imgUrl == ''}">
                    <img src="../img/avatar.png" width="80px" height="80px" onclick="imgclick()"/>
                </c:when>
                <c:otherwise>
                    <img src="${requestScope.person.imgUrl}" width="80px" height="80px" onclick="imgclick()"/>
                </c:otherwise>
            </c:choose>
            <%--            <img src="../img/avatar.png" height="80px" width="80px" onclick="imgclick()"/>--%>
        </div>
        <div class="card-body" style="width: 800px;padding-left: 300px;height: 500px">
            <form id="personForm" action="/Mall/user/update" method="post" onsubmit="sublim(event)">
                <table class="table table-condensed">
                    <input type="hidden" id="imageUrl" name="imageUrl" value="">
                    <input type="file" id="pimage" name="pimage" onchange="fileChange()" style="display: none">
                    <tr>
                        <td style="width: 100px;">姓名</td>
                        <td>
                            <input type="text" name="username1" placeholder="请输入用户名" value="<%=username %>"
                                   id="username1" disabled></td>
                    </tr>
                    <tr>
                        <input type="hidden" name="username" placeholder="请输入用户名" value="<%=username %>"
                               id="username">
                    </tr>
                    <tr>
                        <td>年龄</td>
                        <td><input type="text" name="age" placeholder="请输入年龄" value="${requestScope.person.age}"
                                   id="age" required>
                            <span id="ageError" class="error-message"
                                  style="display: none;">请输入有效的年龄（0-120岁）</span>
                        </td>
                    </tr>
                    <tr>
                        <td>手机</td>
                        <td><input type="text" name="mobile" placeholder="请输入手机"
                                   value="${requestScope.person.mobile}"
                                   id="mobile" required>
                            <span id="mobileError" class="error-message"
                                  style="display: none;">请输入有效的11位手机号码</span>
                        </td>
                    </tr>
                    <tr>
                        <td>邮箱</td>
                        <td><input type="text" name="email" placeholder="请输入邮箱"
                                   value="${requestScope.person.email}"
                                   id="email" required>
                            <span id="emailError" class="error-message"
                                  style="display: none;">请输入有效的邮箱地址</span>
                        </td>
                    </tr>
                    <tr>
                        <td>地址</td>
                        <td><input type="text" name="address" placeholder="请输入地址"
                                   value="${requestScope.person.address}"
                                   id="address" required>
                            <span id="addressError" class="error-message" style="display: none;">地址不能为空</span>
                        </td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td><input type="password" name="password" placeholder="请输入密码"
                                   value="${requestScope.person.password}"
                                   id="password" required></td>
                    </tr>
                </table>
                <div style="margin-left: 150px">
                    <input type="submit" value="保存">
                </div>
            </form>

        </div>
    </div>
</div>
<!-- 嵌入音乐播放器 -->

<audio src="../music/MysteryOFLove.mp3" loop="loop" controls="controls" autoplay="autoplay" hidden></audio>
</body>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/ajaxfileupload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    function imgclick() {
        $("#pimage").click()
    }

    function fileChange() {

        $.ajaxFileUpload({
            url: "${pageContext.request.contextPath}/upload",
            secureuri: false,
            fileElementId: 'pimage',
            dataType: "json",
            success: function (obj) {
                //清空div
                $("#imgDiv").empty();
                //创建一个图片的标签
                var imgObj = $("<img>");
                // 将图片的URL传到HttpServletRequest
                document.getElementById("imageUrl").value = obj.imageUrl;
                imgObj.attr("src", obj.imageUrl);
                imgObj.attr("width", "80px");
                imgObj.attr("height", "80px");
                //将图片追加到imgDiv
                $("#imgDiv").append(imgObj);
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        var form = document.getElementById('personForm'); // 替换为你的表单ID
        form.addEventListener('submit', function (event) {
            var isValid = true;
            var ageError = document.getElementById('ageError');
            var mobileError = document.getElementById('mobileError');
            var emailError = document.getElementById('emailError');
            var addressError = document.getElementById('addressError');
            // 清空之前的错误信息
            ageError.style.display = 'none';
            // 年龄校验
            var age = document.getElementById('age').value;
            if (!age.match(/^\d+$/) || age < 0 || age > 120) {
                ageError.style.display = 'inline';
                isValid = false;
            }

            // 手机校验
            var mobile = document.getElementById('mobile').value;
            if (!mobile.match(/^\d{11}$/)) {
                mobileError.style.display = 'inline';

                isValid = false;
            }

            // 邮箱校验
            var email = document.getElementById('email').value;
            if (!email.match(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/)) {
                emailError.style.display = 'inline';

                isValid = false;
            }

            // 地址校验
            var address = document.getElementById('address').value;
            if (address.trim() === '') {
                addressError.style.display = 'inline';
                isValid = false;
            }


            if (!isValid) {
                event.preventDefault(); // 阻止表单提交
            }

        });
    });
</script>

</html>
